<template>
    <div class="invitation_code">
        <div class="title">{{ $t('my.我的邀请码') }}</div>
        <div class="tabs">
            <div class="item" :class="active == 'invitation' ? 'active' : ''" @click="change('invitation')">{{
                $t('my.邀请好友') }}
            </div>
            <div class="item" :class="active == 'bind' ? 'active' : ''" @click="change('bind')"
                v-if="user.superior_uid <= 0">
                {{ $t('my.绑定邀请码') }}
            </div>
            <div class="item" :class="active == 'list' ? 'active' : ''" @click="change('list')">
                {{ $t('my.邀请列表') }}
            </div>
        </div>
        <InvitationSelf v-if="active == 'invitation'" />
        <BindCode @ok="userIndex" v-else-if="active == 'bind'" />
        <InvitationList v-else />
    </div>
</template>
<script>
import InvitationSelf from "@/components/my/InvitationSelf.vue"
import BindCode from "@/components/my/BindCode.vue"
import InvitationList from "@/components/my/InvitationList.vue"

export default {
    components: {
        InvitationSelf,
        BindCode,
        InvitationList
    },
    data() {
        return {
            active: "invitation",
            user: {}
        }
    },
    // computed: {
    //     ...mapState({
    //         user: state => state.user
    //     })
    // },
    created() {
        this.userIndex();
    },
    methods: {
        async userIndex() {
            let { userinfo } = await this.$api.usersApi.userIndex();
            this.user = userinfo;
        },
        change(type) {
            this.active = type;
        }
    }
}
</script>
<style lang="scss" scoped>
.invitation_code {
    min-width: 100%;
    min-height: 100%;
    // flex: 1;
    border-radius: 10px 10px 0 0;
    padding: 24px;
    box-sizing: border-box;
    background: #FCFCFE;
    position: relative;


    .title {
        font-weight: bold;
        font-size: 20px;
        color: #333333;
        padding-bottom: 16px;
        display: flex;
        justify-content: space-between;
    }

    .tabs {
        display: flex;

        .item {
            height: 45px;
            line-height: 45px;
            text-align: center;
            color: #FFFFFF;
            font-weight: bold;
            font-size: 18px;
            margin-right: 36px;
            padding: 0 10px;
            background: rgba(34, 115, 255, 0.5);
            border-radius: 8px 8px 8px 8px;
            cursor: pointer;

            &.active {
                background: #2273FF;
            }
        }
    }
}
</style>